<template>
  <div>
    <div style="margin:10px 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
    </div >
    <div class="modify" style="margin: 10px 0;">
    </div >
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              selection-change="handleSelectionChange"
              :header-cell-style="tableHeaderColor">
      <el-table-column prop="title" label="标题" sortable width="600"></el-table-column>
      <el-table-column prop="showTime" label="发布时间" sortable width="300"></el-table-column>

      <el-table-column label="操作" >
        <template v-slot="scope" >
          <el-button type="success" @click.native.prevent="openAnnouncement(scope.$index)">查看 <i class="el-icon-zoom-in"></i></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" autocomplete="off"
                    :placeholder="form.title" :readonly="true"></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="form.content" autocomplete="off"
                    :placeholder="form.content" :readonly="true"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAnnouncement">关 闭</el-button>
      </div>
    </el-dialog>

    <!--分页 end-->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[5,10, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
    <!--分页 end-->
  </div>
</template>

<script>
export default {
  name: "Announcement",

  data() {
    return {
      //设置页签
      plate:"公告声明",
      tableData: [],
      count: 0,
      pageNum: 1,
      pageSize: 5,
      state:"全部",
      search: "",
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        title:"",
        content:"",
      },
      dialogFormName: "",
    }
  },

  created() {
    this.load();
    this.$emit("generateTab",this.plate,this.func)
    this.clearForm();
  },

  methods: {
    // 修改table header的背景
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'background-color: #e0f6fe;color: #303133;font-weight: 600;font-size:12px;'
      }
    },
    //

    checkEmpty(x) {
      return x === "" || x === null || x === undefined;
    },

    handleSizeChange(pageSize) {
      console.log("pageSize:" + pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      console.log("pageNum:" + pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    clearAndLoad() {
      this.pageNum = 1;
      this.pageSize = 5;
      this.search = "";
      this.load();
    },

    load() {
      //axios方式http://localhost:9090前缀写在了request.js文件中，可省略
      this.request({
        url: "/announcement/page",
        method: "GET",
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          search: this.search,
          state: this.state
        },
      }).then(
          res => {
            console.log(res.data.records);
            this.tableData = res.data.records.map(a => {
              a.showTime = a.time.slice(0,10)+ "\t"+a.time.slice(11,20);
              return a;
            })
            this.count = res.data.total;
          }
      )
    },

    openAnnouncement(idx)
    {
      let res = this.tableData[idx];
      this.dialogFormVisible = true;
      this.form = res;
      //将地址填入
      this.title = "查看";
      this.content = res.content;
    },

    closeAnnouncement()
    {
      this.dialogFormVisible = false;
      this.load();
    }
  }
}
</script>

<style scoped>

</style>
